<template>
  <div class="app">
    <h1>{{ msg }},学生姓名是：{{ studentName }}</h1>

    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法,使用@或v-on) -->
    <!-- 为Student组件的实例对象vc绑定了一个自定义事件atguigu -->
    <!-- <Student @atguigu="getStudentName" @demo="m1"/> -->

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第二种写法,使用ref) -->
    <Student ref="student" @click.native="show" />
    <!-- 在组件中直接使用原生事件,会默认被当做自定义事件进行处理  需要加.native修饰符才能变为原生事件-->
  </div>
</template>

<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";
// 如果不同样式名同名，后引入的会将先引入的覆盖掉
// 解决方法：为style标签添加 scoped 属性

export default {
  // 组件名称
  name: "Vue2App",
  // 注册子组件
  components: {
    School,
    Student,
  },
  data() {
    return {
      msg: "你好啊！",
      studentName: "",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了学校名", name);
    },
    getStudentName(name, ...params) {
      this.studentName = name;
      console.log("App收到了学生名", name, params);
    },
    m1() {
      console.log("demo事件被触发了");
    },
    show() {
      alert("123");
    },
  },
  // 生命周钩子
  mounted() {
    // 可以增加一些其他的操作(定时器)比直接使用@/v-on绑定自定义事件更灵活
    // setTimeout(() => {
    // 绑定自定义事件  this.$refs.student ==> Student组件的实例对象
    this.$refs.student.$on("atguigu", this.getStudentName);
    // once：只执行一次  
    // this.$refs.student.$once("atguigu",this.getStudentName);
    // }, 3000);
  },
};
</script>
<style>
.app {
  background-color: gray;
  padding: 5px;
}
</style>
